<template>    
  <div    
    :style="{    
      backgroundColor: `rgba(${bgColor.join(',')}, ${bgOpacity})`,  
      color: fontColor, // 字体颜色  
      fontSize: `${fontSize}px`,  
      cursor: 'pointer',  
    }"    
    @click="changeStyle"    
  >    
    Click me to change style    
  </div>    
</template>    
    
<script>    
import { ref } from 'vue';    
    
export default {    
  name: 'StyledBox',    
  setup() {    
    // 初始颜色（RGB）    
    const bgColor = ref([255, 0, 0]); // 红色    
    // 初始字体颜色  
    const fontColor = ref('#000'); // 黑色  
    // 初始透明度    
    const bgOpacity = ref(0.5);    
    // 初始字体大小    
    const fontSize = ref(24);    
    
    // 改变样式的方法    
    const changeStyle = () => {    
      // 假设我们随机改变颜色、透明度和字体大小  
      bgColor.value = [Math.floor(Math.random() * 256), Math.floor(Math.random() * 256), Math.floor(Math.random() * 256)];    
      bgOpacity.value = Math.random();    
      // 字体颜色也可以随机改变，这里仅作为示例，您可以选择固定颜色或随机颜色  
      fontColor.value = '#' + Math.floor(Math.random()*16777215).toString(16); // 随机16进制颜色  
      fontSize.value = Math.floor(Math.random() * 40) + 16; // 字体大小在16到56之间    
    };    
    
    // 返回响应式状态和方法    
    return {    
      bgColor,    
      bgOpacity,    
      fontColor, // 添加字体颜色到返回值  
      fontSize,    
      changeStyle,    
    };    
  },    
};    
</script>    
    
<style scoped>    
/* 这里可以添加一些额外的样式 */    
</style>